
<script>
import { ref, reactive, onMounted, toRefs } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    const lists = reactive({
      beans: 0, //余额
    });
    // 转盘上要展示的奖品数据
    const prizeList = ref([
      {
        id: "xiaomi",
        prizeName: "小米手机",
        prizeImg:
          "https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png",
      },
      {
        id: "blue",
        prizeColor: "rgb(251, 219, 216)",
        prizeName: "蓝牙耳机",
        prizeImg:
          "https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg",
      },
      {
        id: "thanks",
        prizeName: "鲨粮*10",
        prizeImg: "../assets/img/eat.png",
      },
      {
        id: "apple",
        prizeName: "apple watch",
        prizeImg:
          "https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png",
      },
      {
        id: "fruit",
        prizeColor: "rgba(246, 142, 46, 0.5)",
        prizeName: "迪士尼苹果",
        prizeImg:
          "https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png",
      },
      {
        id: "thanks",
        prizeName: "鲨粮*10",
        prizeImg: "../assets/img/eat.png",
      },
      {
        id: "fish",
        prizeName: "海鲜套餐",
        prizeImg:
          "https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png",
      },
      {
        id: "thanks",
        prizeName: "鲨粮*10",
        prizeImg: "../assets/img/eat.png",
      },
    ]);
    // 转盘样式的选项
    const styleOpt = reactive({
      prizeItem: {},
      startStyle: {},
      contentBg: {
        background: "rgb(255, 231, 149)",
      },
    });
    // 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
    const prizeIndex = ref(0);
    const startTurns = () => {
      if (lists.beans < 100) {
        Toast("鲨豆余额不足,本次抽奖无效");
      } else {
        const index = Math.floor(Math.random() * prizeList.value.length);
        prizeIndex.value = index;
        lists.beans -= 100;
        // console.log(lists.beans);
        window.localStorage.setItem("bean", lists.beans);
        setTimeout(()=>{
          Toast("中奖了");
        },1800)
       
      }
    };
    const endTurns = () => {
      console.log(prizeIndex.value);
    };
    onMounted(() => {
      lists.beans = Number(window.localStorage.getItem("bean"));
    });
    return {
      prizeList,
      styleOpt,
      prizeIndex,
      startTurns,
      endTurns,
      ...toRefs(lists),
    };
  },
};
</script>

<template>
  <div class="luckydraw">
    <div class="top">
      <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
    </div>
    <div class="img">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Fback_pic%2F04%2F04%2F88%2F12580b5d5aa4998.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672313707&t=0e89e78e3cf3972c8b308ca8fcfafd37"
        alt=""
      />
    </div>
    <div class="text">
      <p>抽奖规则:100鲨豆/次 &nbsp;&nbsp;&nbsp;鲨豆余额:{{ beans }}</p>
    </div>
    <nutbig-marquee
      :prize-list="prizeList"
      :prize-index="prizeIndex"
      :speed="100"
      :circle="40"
      @start-turns="startTurns"
      @end-turns="endTurns"
    >
    </nutbig-marquee>
  </div>
</template>

<style lang="scss" scoped>
.luckydraw {
  background-color: #c0241b;
  padding-bottom: 34px;
  .top {
    height: 49px;
    height: 49px;
    padding: 5px 10px;
    background: linear-gradient(270deg, #99221a 0%, #d9251b 100%);
    display: flex;
    align-items: center;
    .iconfont {
      color: #fff;
      font-size: 20px;
    }
  }
  .img {
    width: 100%;
    img {
      width: 100%;
    }
    margin-bottom: 20px;
  }
  .text {
    text-align: center;
    height: 15px;
    font-size: 14px;
    color: #fff;
    margin-bottom: 20px;
  }
}
</style>